<template>
  <div>
    <roofVue title="商品分类"></roofVue>
    <van-tree-select
      height="100vh"
      :items="items"
      :main-active-index.sync="active"
      @click-nav="get"
    >
      <template #content>
        <van-grid :column-num="3" @click="$router.push('/prolist')">
          <van-grid-item v-for="i in productCategoryList" :key="i.id">
            <img style="height: 50px; width: 50px" :src="imgurl + i.image" alt />
            <br />
            <span>{{ i.name }}</span>
          </van-grid-item>
        </van-grid>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import roofVue from "../other/roof.vue";
export default {
  data() {
    return {
      active: 0,
      // items: [{ text: "分组 1" }, { text: "分组 2" }],
      items: [],
      productCategoryList: [],
    };
  },
  components: {
    roofVue,
  },
  methods: {
    async getfenlei() {
      console.log(this.url2 + "/category/list");
      let res = await this.$post(this.url2 + "/category/list", {});
      // if(res)
      console.log(res);
      if (res.errorCode == "0") {
        this.items.push(...res.data);
        this.get(0)
        this.items.map((nus) => {
          nus.text = nus.name;

        });
      }
    },
    // 查询二级分类
    get(id) {
      console.log(id);
      this.$post(this.url2 + "/category/list", {
        id: this.items[id].id,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.productCategoryList = res.data.productCategoryList;
          console.log(this.productCategoryList);
        }
      });
    },
  },
  created() {
    this.getfenlei();

  },
  watch: {
    // active() {
    //   console.log(this.active);
    // },

  },
};
</script>

<style  scoped>
</style>